<!-- 添加安全评价机构页面 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>机构基本信息</span>
                </div>
            </div>
            <div class="tableCss">
                <el-form ref="ruleForm" :label-position="labelPosition" label-width="190px" :model="AgentForm" :rules="rules">
                    <el-form-item label="机构名称" prop="agentName">
                        <el-input v-model="AgentForm.agentName" clearable placeholder="请输入机构名称" />
                    </el-form-item>
                    <el-form-item label="统一社会信用代码/注册号" prop="agentCode">
                        <el-input v-model="AgentForm.agentCode" placeholder="请输入统一社会信用代码/注册号" clearable />
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="办公地址" prop="address">
                                <el-input v-model="AgentForm.address" placeholder="请输入办公地址" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮政编码" prop="zipCode">
                                <el-input v-model="AgentForm.zipCode" placeholder="请输入邮政编码" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="机构信息公开网址" prop="web">
                                <el-input v-model="AgentForm.web" placeholder="请输入机构信息公开网址" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法定代表人" prop="legalRep">
                                <el-input v-model="AgentForm.legalRep" placeholder="请输入法定代表人" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="contacts">
                                <el-input v-model="AgentForm.contacts" placeholder="请输入联系人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" prop="mobile">
                                <el-input v-model="AgentForm.mobile" placeholder="请输入联系电话" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="专职技术负责人" prop="technicalDirector">
                                <el-input v-model="AgentForm.technicalDirector" placeholder="请输入专职技术负责人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="过程控制负责人" prop="processControl">
                                <el-input v-model="AgentForm.processControl" placeholder="请输入过程控制负责人" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="资质证书编号" prop="qualifiCertifiId">
                                <el-input v-model="AgentForm.qualifiCertifiId" placeholder="请输入资质证书编号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发证日期" prop="issueTime">
                                <el-date-picker v-model="AgentForm.issueTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="业务范围" prop="businessScope">
                        <el-input v-model="AgentForm.businessScope" placeholder="请输入业务范围" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 添加机构安全评价师 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>本机构安全评价师</span>
                    <span><el-button style="margin-left: 10px;" type="success" plain icon="el-icon-plus" size="mini" @click="addTeamInfo">添加</el-button></span>
                </div>
            </div>
            <div style="padding: 5px;">
                <el-table border stripe :data="Evaluators.data" style="width: 70%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column type="index" />
                    <el-table-column v-for="(v, i) in Evaluators.columns" :key="i" align="center" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-select v-if="v.field === 'peopleAttribute'" v-model="Evaluators.sel[v.field]">
                                    <el-option v-for="item in memberType" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-input v-else v-model="Evaluators.sel[v.field]" clearable />
                            </span>
                            <span v-else>{{ scope.row[v.field] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button class="el-button el-button--warning el-button--small" style="cursor: pointer;" @click="pwdChange(scope.row, scope.$index, true)">
                                {{ scope.row.isSet? '保存': '修改' }}
                            </el-button>
                            <el-button v-if="!scope.row.isSet" class="el-button el-button--danger el-button--small" style="cursor: pointer;" @click="showDeleteDialog(scope.$index)">
                                删除
                            </el-button>
                            <el-button v-else class="el-button el-button--primary  el-button--small" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="margin-left: 600px;">
            <el-button type="primary" @click="submit">确 认 提 交</el-button>
            <div style="margin-left: 15px; display: inline-block;">
                <router-link :to="{name: 'SafetyEvaluationOrganizationIndex'}">
                    <el-button plain type="primary">取 消</el-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
var generateId = {
    _count: 1,
    get() {
        return ((+new Date()) + '_' + (this._count++))
    }
}
export default {
    name: 'AddSafeEvaluationAgent',
    data() {
        return {
            AgentForm: {},
            labelPosition: 'right',
            rules: {
                agentName: [
                    { required: true, trigger: 'blur', message: '请输入机构名称' }
                ],
                agentCode: [
                    { required: true, trigger: 'blur', message: '请输入统一社会信用代码/注册号' }
                ],
                address: [
                    { required: true, trigger: 'blur', message: '请输入办公地址' }
                ],
                zipCode: [
                    { required: true, trigger: 'blur', message: '请输入邮政编码' }
                ],
                web: [
                    { required: true, trigger: 'blur', message: '请输入机构信息公开网址' }
                ],
                legalRep: [
                    { required: true, trigger: 'blur', message: '请输入法定代表人' }
                ],
                contacts: [
                    { required: true, trigger: 'blur', message: '请输入联系人' }
                ],
                mobile: [
                    { required: true, trigger: 'change', message: '请输入联系电话' }
                ],
                technicalDirector: [
                    { required: true, trigger: 'blur', message: '请输入专职技术负责人' }
                ],
                processControl: [
                    { required: true, trigger: 'blur', message: '请输入过程控制负责人' }
                ],
                qualifiCertifiId: [
                    { required: true, trigger: 'blur', message: '请输入资质证书编号' }
                ],
                issueTime: [
                    { required: true, trigger: 'change', message: '请选择发证日期' }
                ],
                businessScope: [
                    { required: true, trigger: 'blur', message: '请输入业务范围' }
                ]
            },
            Evaluators: {
                sel: null,
                columns: [
                    {field: 'evalueProfName', title: '姓名', width: 130},
                    {field: 'evalueProfMajor', title: '专业'},
                    {field: 'evalueProfCertifi', title: '证书号码', width: 220}
                ],
                data: []
            }
        }
    },
    methods: {
        readEvaluators() { // 读取表格数据
            // 根据实际情况，自己改下啊
            this.Evaluators.data.map(i => {
                i.id = generateId.get() // 模拟后台插入成功后有了id
                i.isSet = false // 给后台返回数据添加`isSet`标识
                return i
            })
        },
        pwdChange(row, index, cg) { // 修改
            for (let i of this.Evaluators.data) { // 点击修改 判断是否已经保存所有操作
                if (i.isSet && i.id !== row.id) {
                    this.$message.warning('请先保存当前编辑项')
                    return false
                }
            }
            if (!cg) { // 是否是取消操作
                if (!this.Evaluators.sel.id) this.Evaluators.data.splice(index, 1)
                return row.isSet = !row.isSet
            }
            if (row.isSet) { // 提交数据
                // 项目是模拟请求操作  自己修改下
                let data = JSON.parse(JSON.stringify(this.Evaluators.sel))
                for (let k in data)  row[k] = data[k]
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                })
                // 然后这边重新读取表格数据
                this.readEvaluators()
                row.isSet = false
            } else {
                this.Evaluators.sel = JSON.parse(JSON.stringify(row))
                row.isSet = true
            }
        },
        showDeleteDialog(index) { // 删除添加表格里面的一行数据
            this.Evaluators.data.splice(index, 1)
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
        },
        addTeamInfo() { // 添加'机构评价师'
            for (let i of this.Evaluators.data) {
                if (i.isSet) return this.$message.warning('请先保存当前编辑项')
            }
            let j = {
                id: 0,
                'evalueProfName': '',
                'evalueProfMajor': '',
                'evalueProfCertifi': '',
                'isSet': true
            }
            this.Evaluators.data.push(j)
            this.Evaluators.sel = JSON.parse(JSON.stringify(j))
        },
        submit() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    var param = {}
                    param = Object.assign(param, this.AgentForm)
                    var list = []
                    list = Object.assign(list, this.Evaluators.data)
                    for (let i = 0; i < list.length; i++) {
                        list[i].id = null
                        list[i].isSet = null
                    }
                    setTimeout(() => {
                        param.safeEvaluatorList = list
                        this.postRequest('/system/safeAgent/addSafeEvalue', param).then(resp => {
                            if (resp) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功!'
                                })
                                this.$router.push({path: '/safety_evaluation_organization/index'})
                            }
                        })
                    }, 200)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.tableCss {
    padding: 5px;
    margin-left: 10px;
    .el-input {
        width: 300px;
    }
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
</style>

